<template>
  <div class="register-page">
    <div class="register">
      <div class="register-form">
        <a-form :form="form" @submit="handleSubmit">
          <a-form-item v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'username',
                {
                  rules: [
                    {
                      required: true,
                      message: '请填写您的账号！',
                      whitespace: true,
                    },
                    {
                      min: 6,
                      max: 20,
                      message: '账号的长度不能小于6位或大于20位字符！',
                      whitespace: true,
                    },
                  ],
                },
              ]"
            />
            <span slot="label">
              账号
              <a-tooltip
                title="账号是唯一的，不能与其他人一样，推荐使用手机号码。"
              >
                <a-icon type="question-circle-o" />
              </a-tooltip>
            </span>
          </a-form-item>
          <!--<a-form-item v-bind="formItemLayout" label="邮箱地址">-->
          <!--  <a-input-->
          <!--    v-decorator="[-->
          <!--      'email',-->
          <!--      {-->
          <!--        rules: [-->
          <!--          {-->
          <!--            type: 'email',-->
          <!--            message: '请填写有效的邮箱地址！',-->
          <!--          },-->
          <!--          {-->
          <!--            required: true,-->
          <!--            message: '请填写您的邮箱地址！',-->
          <!--          },-->
          <!--        ],-->
          <!--      },-->
          <!--    ]"-->
          <!--  />-->
          <!--</a-form-item>-->
          <!--<a-form-item v-bind="formItemLayout" label="验证码">-->
          <!--  <a-row :gutter="8">-->
          <!--    <a-col :span="12">-->
          <!--      <a-input-->
          <!--        class="emailCode"-->
          <!--        v-decorator="[-->
          <!--          'emailCode',-->
          <!--          {-->
          <!--            rules: [-->
          <!--              {-->
          <!--                required: true,-->
          <!--                message: '请填写您收得的验证码！',-->
          <!--              },-->
          <!--            ],-->
          <!--          },-->
          <!--        ]"-->
          <!--      />-->
          <!--    </a-col>-->
          <!--    <a-col :span="12">-->
          <!--      <a-button-->
          <!--        class="btn-get-emailCode"-->
          <!--        :disabled="isDisabled"-->
          <!--        @click="getEmailCode()"-->
          <!--        >{{ emailCodeBtnTitle }}</a-button-->
          <!--      >-->
          <!--    </a-col>-->
          <!--  </a-row>-->
          <!--</a-form-item>-->
          <a-form-item v-bind="formItemLayout" label="密 码" has-feedback>
            <a-input-password
              v-decorator="[
                'password',
                {
                  rules: [
                    { required: true, message: '请填写密码！' },
                    { min: 8, max: 20, message: '密码长度应该在8~20位之间！' },
                    { validator: validateToNextPassword },
                  ],
                },
              ]"
              type="password"
            />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="确认密码" has-feedback>
            <a-input-password
              v-decorator="[
                'confirm',
                {
                  rules: [
                    {
                      required: true,
                      message: '请确认密码！',
                    },
                    {
                      validator: compareToFirstPassword,
                    },
                  ],
                },
              ]"
              type="password"
              @blur="handleConfirmBlur"
            />
          </a-form-item>
          <a-form-item v-bind="tailFormItemLayout">
            <a-checkbox
          :checked="checked"

              @click="getIsAgreement()"
            >
              已阅读并同意
              <a href="#" target="_self" @click="showModal()">
                家政服务平台服务协议
              </a>
            </a-checkbox>
              <a-modal
                title="家政服务平台服务协议"
                :visible.sync="visible"
                @ok="handleOk"
                @cancel="handleCancel"
                okText="同意"
                cancelText="不同意"
                width="1200px"
              >


      <p>欢迎来到家政服务平台！在使用我们的服务之前，请仔细阅读以下服务协议。通过点击“同意”按钮，您将被视为已阅读、理解并同意接受本协议的所有条款和条件。</p>

<p style="font-weight:bold">1、服务内容</p>
<span>家政服务平台（以下简称“平台”）为用户提供家政服务信息，包括但不限于保洁、保姆、月嫂、育儿嫂等。用户可以通过平台预约、咨询、评价家政服务人员。</span>

<p style="font-weight:bold">2、注册与使用</p>
用户在使用平台服务前，需要注册成为平台会员。用户应提供真实、准确、完整的个人信息，并及时更新。用户应妥善保管好自己的账号和密码，不得将账号、密码提供给他人使用。

<p style="font-weight:bold">3、服务费用</p>
用户在使用平台服务时，可能需要支付一定的服务费用。具体费用标准以平台公示为准。用户应按照约定的时间、方式支付相关费用。

<p style="font-weight:bold">4、服务质量与保障</p>
平台承诺提供的家政服务人员具备相应的资质和技能。如用户对服务质量不满意，可向平台投诉，平台将协助处理。如因家政服务人员原因导致用户损失，平台将依法承担相应的法律责任。

<p style="font-weight:bold">5、隐私保护</p>
平台尊重并保护用户的个人隐私，未经用户同意，不会向第三方披露用户的个人信息。但根据法律法规规定或政府部门要求，平台可能需要披露用户的个人信息。

<p style="font-weight:bold">6、知识产权</p>
平台所展示的文字、图片、音频、视频等素材的著作权归平台所有，未经许可，任何单位或个人不得擅自复制、转载、传播。

<p style="font-weight:bold">7、免责声明</p>
平台不对因不可抗力、网络故障、黑客攻击等原因造成的服务中断、数据丢失承担责任。用户应自行备份重要数据。

<p style="font-weight:bold">8、法律适用与争议解决</p>
本协议的签订、履行、解释及争议解决均适用中华人民共和国法律。如双方发生争议，应首先友好协商解决；协商不成的，任何一方均有权向有管辖权的人民法院提起诉讼。

<p style="font-weight:bold">9、协议修改与终止</p>
平台有权根据实际情况随时修改本协议，并在平台公示。用户继续使用平台服务，视为接受修改后的协议。如用户不同意修改后的协议，有权停止使用平台服务。

<p style="font-weight:bold">10、其他</p>
本协议未尽事宜，可由双方另行商定补充协议。补充协议与本协议具有同等法律效力。

<p>请您在仔细阅读并充分理解本协议后，选择“同意”或“不同意”。如您选择“同意”，则表示您同意接受本协议的所有条款和条件。如您选择“不同意”，则您将无法使用平台提供的服务。</p>
     <!-- <template #ok="{ 同意}"></template> -->
    </a-modal>
          </a-form-item>
          <a-form-item v-bind="tailFormItemLayout">
            <a-button
              type="primary"
              html-type="submit"
              class="btn-register"
              :disabled="btn_disabled"
            >
              注册
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="jiazheng">
            <div class="title" ><router-link to="/" style="color: black;">幸福家</router-link></div>
              <div style="color:black;margin-top:40px;font-size:40px;font-weight:bold">家政八九点，幸福天天有</div>
            <!-- <h2>-注册账号</h2> -->

      </div>
    </div>
    <!-- <div class="register-footer">
      <p><a href="/" style="color: #000000a6">幸福家家政服务平台</a></p>
      <p>版权所有 &copy;Demo</p>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked:false,
      visible:false,
      emailCodeBtnTitle: "获取验证码",
      count: 60,
      isDisabled: false,
      timer: "",
      btn_disabled: false,
      // 组件自带的
      confirmDirty: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "register" });
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk() {
      this.visible = false;
      this.checked=true;

    },
    handleCancel() {
      this.visible = false;
      this.checked=false;
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          const _this = this;
          this.$axios.post("/user/register", values).then((res) => {
            console.log(res);
            if (res.data.message === "注册成功") {
              _this.$message.success(
                res.data.message + "！即将跳转至登录页面..."
              );
              setTimeout(() => {
                _this.$router.push({
                  name: "FrontLogin",
                  params: {
                    key: res.data.data.responseBody,
                  },
                });
              }, 2000);
            } else {
              _this.$message.error(res.data.message + "！");
            }
          });
        }
      });
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue("password")) {
        callback("请确认两次密码是否一致!");
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(["confirm"], { force: true });
      }
      callback();
    },
    /* 发送请求，获取邮箱验证码 */
    getEmailCode() {
      let email = this.form.getFieldValue("email");
      if (email == "" || email == null) {
        this.$message.warning("请先输入邮箱！");
      } else {
        // 这里调用倒计时的方法，倒计时开始时，将按钮设为禁用状态
        this.timer = setInterval(this.countdown, 1000);
        this.isDisabled = true;
        this.$axios.get("/get/emailCode/" + email).then((res) => {
          console.log(res);
          this.$notification.open({
            type: "success",
            message: "提示",
            description: "验证码发送成功，请及时前往邮箱查看！（5分钟内有效）",
            placement: "bottomRight",
            duration: 2.5,
          });
        });
      }
    },
    /* 倒计时的方法，点击时被调用，点击获取验证码后，就可以倒计时 */
    countdown() {
      console.log("countDown");
      this.emailCodeBtnTitle = this.count + "s后重新获取";
      this.count--;
      if (this.count == -1) {
        this.isDisabled = false;
        this.emailCodeBtnTitle = "获取验证码";
        clearInterval(this.timer);
        this.count = 60;
      }
    },
    /* 拿到是否同意协议的结果 */
    getIsAgreement() {
      this.showModal()
    },
  },
};
</script>

<style >
.jiazheng{
  /* display: flex; */
  width: 600px;

  margin-top: 140px;
}
.jiazheng .title{
  width: 600px;
   height: 100px;
}
.jiazheng .title a {
  font-size: 80px;
  font-family: "微软雅黑";
  font-weight: bold;
  color: #fff;
  /* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0px -1px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000, 1px 0px 0 #000; */
  margin: 50px auto;
  /* -webkit-animation: swing 2s infinite; */
  animation: swing 2s infinite;
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-15deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-15deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
.register-page .ant-form-explain {
  font-size: 13px;
}
.register-page .ant-input {
  height: 37px;
}
.register-page .emailCode {
  width: 200px;
}
.register-page .btn-get-emailCode {
  width: 130px;
  height: 37px;
  margin-left: 36px;
}
.register-page .btn-register {
  width: 300px;
  height: 37px;
}

.register-page {
  background-color: #fff;
  width: 100%;
  height: 100%;
  color: #000000a6;
}

.register-page .title {

  /* text-align: center; */
  line-height: 100px;
}
.register-page .register {
  padding-top: 28px;
  background-image: url(../assets/img/dl2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
}
.register-page .register-form {
  width: 500px;
  height: 400px;
  background-color: #fff;
  margin: 67px 74px;
  padding: 35px 20px;
  display: flex;
  flex-wrap: wrap;
  color: #606266;
  background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 1px );
-webkit-backdrop-filter: blur( 1px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
  /* border-radius: 10px; */
}


.register-page .register-footer p {
  /* margin-top: 30px; */
  font-size: 13px;
  height: 10px;
  line-height: 10px;
}

@media screen and (max-width: 820px) {
  .register-page .register-form {
    width: 600px;
    height: 538px;
    /* padding: 68px 90px 38px 0; */
    background-color: #fff;
    float: left;
  }

  .register-page .register-footer {
    text-align: left;
    background-color: #fff;
    padding-left: 208px;
    height: 100px;
    padding-top: 33px;
  }
}



</style>
